<script setup>
import { computed } from 'vue';

const props = defineProps({
  data: {
    records: [],  // 当前页数据
    total: 0,     // 总数据量
    size: 5,     // 每页条数
    current: 1,   // 当前页码
    pages: 1      // 总页数
  }
});

const emit = defineEmits(['page-change']);

// 计算分页按钮显示逻辑
const paginationItems = computed(() => {
  const { current, pages } = props?.data;
  const items = [];

  // 总页数小于等于7时显示所有页码
  if (pages <= 7) {
    for (let i = 1; i <= pages; i++) {
      items.push(i);
    }
    return items;
  }

  // 当前页在左侧区域（前3页）
  if (current <= 3) {
    return [1, 2, 3, 4, '...', pages - 1, pages];
  }

  // 当前页在右侧区域（后3页）
  if (current >= pages - 2) {
    return [1, 2, '...', pages - 3, pages - 2, pages - 1, pages];
  }

  // 当前页在中间区域
  return [
    1,
    '...',
    current - 1,
    current,
    current + 1,
    '...',
    pages
  ];
});

// 处理页码点击
const handlePageChange = (page) => {
  if (
      page === '...' ||        // 省略号按钮
      page === props.data?.current || // 当前页
      page < 1 ||              // 超出最小页
      page > props.data?.pages  // 超出最大页
  ) return;

  emit('page-change', page);
};
</script>

<template>
  <div class="join">
    <!-- 上一页按钮 -->
    <button
        class="join-item btn"
        :disabled="props.data?.current === 1"
        @click="handlePageChange(props.data.current - 1)"
    >
      «
    </button>

    <!-- 分页按钮 -->
    <button
        v-for="(item, index) in paginationItems"
        :key="index"
        class="join-item btn"
        :class="{
        'btn-disabled': item === '...',
        'btn-active': item === props.data?.current
      }"
        @click="handlePageChange(item)"
    >
      {{ item }}
    </button>

    <!-- 下一页按钮 -->
    <button
        class="join-item btn"
        :disabled="props.data?.current === props.data?.pages"
        @click="handlePageChange(props.data?.current + 1)"
    >
      »
    </button>
  </div>
</template>